<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}"
          type="image/x-icon">
    <title>注册</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/normalize.css" /> -->
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='css/default.css') }}">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
    <style>
        html,
        body {
            height: 100%;
        }

        html {
            display: table;
            margin: auto;
        }

        body {
            display: table-cell;
            vertical-align: middle;
        }

        .margin {
            margin: 0 !important;
        }

        .card-panel {
            width: 353px !important;
        }
    </style>
</head>
<body class="blue" style="background-color: #36f4e7 !important;">
<div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
        <form class="login-form" method="POST" role="form"
              action="{{ url_for('main.signin') }}"
              onsubmit="return check_signin()">
            <div class="row">
                <div class="input-field col s12 center">
                    {#	            <img src="http://w3lessons.info/logo.png" alt="" class="responsive-img valign profile-image-login">#}
                    <h2 class="center login-form-text">用户注册</h2>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-social-person-outline prefix"></i>
                    <input id="username" name="username" type="text" class="validate">
                    <label for="username" class="center-align">用户名</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-communication-email prefix"></i>
                    <input id="email" name="email" type="email" class="validate">
                    <label for="email" class="center-align">邮箱</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-action-lock-outline prefix"></i>
                    <input id="password"  name="password" type="password" class="validate">
                    <label for="password">密码</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="mdi-action-lock-outline prefix"></i>
                    <input id="password-again" name="re_password" type="password">
                    <label for="password-again">确认密码</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <button type="submit"
                            class="btn waves-effect waves-light col s12">立刻注册
                    </button>
                </div>
                <div class="input-field col s12">
                    <p class="margin center medium-small sign-up">已经有了账号?
                        <a href="{{ url_for('main.login') }}">登录</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/static/js/jquery-2.1.1.min.js"></script>
<!--materialize js-->
<script src="/static/layer-v3.5.1/layer.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script type="text/javascript">
    function check_signin() {
        console.log("####################")
        var username = $("#username").val().trim();
        var email = $("#email").val().trim();
        var pass = $("#password").val().trim();
        var repass = $("#password-again").val().trim();
        var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        if (username === "") {
            console.log(username);
            layer.msg("用户名不能为空！");
            return false;
        }
        if (email === "") {
            console.log(email);
            layer.msg("邮箱不能为空！");
            return false;
        }
        if (pass === "") {
            console.log(pass);
            layer.msg("密码不能为空！");
            return false;
        }
        if (repass === "") {
            console.log(repass);
            layer.msg("确认密码不能为空！");
            return false;
        }
        if (repass !== repass) {
            console.log(repass);
            layer.msg("两次密码不一致！");
            return false;
        }
        if (username !== "" && pass !== "" && email !=="") {
            if (!regEmail.test(email)) {
                layer.msg("邮箱格式错误！");
                return false;
            }
            if (pass.length < 8) {
                layer.msg("密码不能少于8位！");
                return false;
            }
            return true;
        }
    }

    function check_register() {
        var name = $("#r_user_name").val();
        var pass = $("#r_password").val();
        var email = $("r_email").val();
        if (name != "" && pass == "" && email != "") {
            alert("注册成功！");
            $("#user_name").val("");
            $("#password").val("");
        } else {
            $("#login_form").removeClass('shake_effect');
            setTimeout(function () {
                $("#login_form").addClass('shake_effect')
            }, 1);
        }
    }

    $(function () {
        $("#create").click(function () {
            check_register();
            return false;
        })
        $('.message a').click(function () {
            $('form').animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 'slow');
        });
    })
</script>
</body>
</html>